<template>
  <div>
    <el-input class="search" v-model="input" placeholder="请输入搜索内容" @keyup.native.13="test"
     @focus="handlehotwrods" @blur="rmhotwrods"></el-input>
     <div class="wrap">
        <div class="innerwrap">
          <ul class="hotwords" v-show="IsShow" v-for="item in blogsHotWrods">
            <li>{{item.title}}</li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      blogsHotWrods: Array
    },
    name: "search",
    data() {
      return {
       blogs: {},
        currentPage: 1,
        total: 0,
        pageSize: 5,
        input: '',
        IsShow: false
      }
    },
    methods: {
        test () {
            var val = this.input;
             this.$emit("changeval",val)
            // const _this = this
            //  _this.$axios.get("/blog/"+val).then(res => {
            //  console.log(res)
            //  //  _this.$router.push("/blogs").catch(err => err)
            //  //  this.$emit("changeval",val)
            //  })
        },
        handlehotwrods() {
          this.handleIsShow()

        },
        handleIsShow() {
          this.IsShow = !this.IsShow
        },
        rmhotwrods() {
          this.handleIsShow()
        }
    }
    }
</script>

<style scoped>
    ul {
     
      list-style:none;
      margin: 0;
      padding: 0;
       background-color: #bbb
    }
    ul li {
      width: 630px;
    }
    .wrap {

      position: relative;
       top: 0;
      left: 0;
    }
    .innerwrap {
/**/ position: absolute;
      top: 0;
      left: 0; 
      z-index: 99;
    }
    .search{
        display:block;
        margin: 0 auto;
    }
    .hotwords {
     
    }

</style>